<template>
    <div  @keypress="clearKeyWorsds"> 
         <label>关键词：<input v-model="keyword" ></label>
         <label>地区：<input v-model="location"></label>
        <baidu-map class="bm-view" :center="center" style="display: flex; flex-direction: column" :zoom ="zoom" :scroll-wheel-zoom="true" > 
            <bm-local-search :keyword="keyword" :auto-viewport="true" :location="location" style="width:70%"></bm-local-search>
            <bm-view style="width: 100%; height:100px; flex: 1"></bm-view>
            <bm-marker :position="{lng: 116.404, lat: 39.915}" :dragging="true" >
                <!-- <bm-label content="我爱北京天安门" :labelStyle="{color: 'red', fontSize : '24px'}" :offset="{width: -35, height: 30}"/> -->
            </bm-marker>
            <bm-overview-map anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :isOpen="true"></bm-overview-map>
            <bm-geolocation anchor="BMAP_ANCHOR_TOP_RIGHT" :showAddressBar="true" :autoLocation="true"></bm-geolocation>
            
        </baidu-map>
    </div>
</template>
<script>
export default {
   data() {
      return {
        // center:{
        //     lng:23,
        //     lat:59
        // },
        center:"北京",
        zoom:10,
        keyword:'',
        location:''
      }
   },
   created(){
   },
   computed:{
   },
   methods:{
    clearKeyWorsds(){
        this.keyword = '',
        this.location = ''
    },
    dianji( type,target){
        console.log(1111,type);
        console.log(222,target);
    }   
   },
}
</script>
<style lang="less" scoped> 

.bm-view {
  width: 100%;
  height: 400px;
}
</style>
